<template>
	<view class="content">
		<!-- 搜索框 -->
		<up-search placeholder="搜索经典" bg-color="#e3e3e3" v-model="keyword"></up-search>
		<!-- 轮播图案 -->
		<up-swiper v-if="bannerList.length" keyName="image" :list="bannerList" showTitle radius="8" :autoplay="true"
			height="160" circular></up-swiper>
		<up-notice-bar bg-color="rgb(240, 240, 240)" text="项目数据仅为实例,非真实数据" mode="closable"></up-notice-bar>
		<!-- 瀑布流up-waterfall -->
		<view class="list">
			<up-waterfall v-model="flowList" columns="2">
				<template v-slot:left="{leftList}">
					<view class="demo-warter" v-for="(item,index) in leftList" :key="index" @click="goDetail(item)">
						<!-- 图片的懒记载up-lazy-load -->
						<up-lazy-load threshold="-450" border-radius="10" :image="item.img"
							:index="index"></up-lazy-load>
						<view class="demo-title">
							{{item.title}}
						</view>
						<view class="demo-price">
							{{item.times}}
						</view>
						<view class="demo-tag">
							<view class="demo-tag-owner">
								{{item.tag[0]}}
							</view>
							<view class="demo-tag-text">
								{{item.tag[1]}}
							</view>
						</view>
						<view class="isDot" v-if="item.isDot">
							{{item.isDot}}
						</view>
					</view>
				</template>
			</up-waterfall>
		</view>
		<view v-if="showTopBtn" class="topClass" @click="GoTop">
			<up-icon name="arrow-upward" color="#fff" size="28"></up-icon>
		</view>
	</view>
</template>
<script setup>
	import {getBanner,getHomeList} from '../../api/api.js';
	import {onLoad, // 页面启动的生命周期
		onReachBottom, //滚动屏幕触底函数
		onPageScroll, //滚动监听
	} from '@dcloudio/uni-app'
	import {
		random, //随机数
		guid, //生成唯一标识
	} from '@/uni_modules/uview-plus';
	import {ref,reactive} from 'vue'
import { jsonString } from '../../uni_modules/uview-plus/libs/function/test.js';

	const keyword = ref('')
	//轮播图数据
	const bannerList = ref([])
	//瀑布流数据
	const flowList = ref([])
	//控制箭头显示
	const showTopBtn = ref(0)
	// 页面启动的生命周期
	onLoad(() => {
		getBanner().then(res => {
			bannerList.value = res.bannerList
			// console.log(bannerList.value)
		})
		getHomeList().then(res => {
			console.log(res, 'getHomeList')
			flowList.value = res
		})
	})
	onReachBottom(() => {
		console.log("触底")
		//触底后增添数据
		setTimeout(() => {
			addRandomDada()
		}, 1000)
	})
	//模拟后台获取数据
	const addRandomDada = () => {
		for (let i = 0; i < 10; i++) {
			let index = random(0, flowList.value.length - 1)
			let item = JSON.parse(JSON.stringify(flowList.value[index]))
			item.id = guid() //guid唯一标识 
			flowList.value.push(item)
		}
	}
	//滚动监听函数，控制箭头显示
	onPageScroll((e) => {
		if (e.scrollTop > 600) {
			showTopBtn.value = 1
		} else {
			showTopBtn.value = 0
		}
	})
	//箭头到头部的函数
	const GoTop = () => {
		uni.pageScrollTo({
			scrollTop: 0, //滚动到页面的目标位置
			duration: 300 //滚动动画的时长
		})
	}
	//跳转详情页  navigateTo:保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面
	const goDetail = (item)=>{
		const con = JSON.stringify(item)
		uni.navigateTo({
			url:`/pages/detail/detail?item=${encodeURIComponent(con)}`
		})
	}
</script>

<style>
	page {
		background-color: rgb(240, 240, 240);
	}
</style>
<style lang="scss" scoped>
	.content {
		padding: 20rpx 20rpx;
	}
	//卡片
	.list {
		margin: 30rpx 0;
		.demo-warter {
			margin: 10rpx 8rpx 10rpx 0;
			padding: 16rpx;
			background-color: #fff;
			border-radius: 16rpx;
			position: relative;
		}
		.demo-title {
			color: #303133;
			font-size: 30rpx;
			margin-top: 10rpx;
		}
		.demo-price {
			color: #777;
			font-size: 24rpx;
			margin-top: 10rpx;
		}
		//两个标签
		.demo-tag {
			display: flex;
			margin-top: 10rpx;

			.demo-tag-owner {
				display: flex;
				font-size: 20rpx;
				color: #ffaa00;
				align-items: center;
				padding: 4rpx 12rpx;
				border: 1px solid rgb(252, 163, 129);
				border-radius: 50rpx;
			}
			.demo-tag-text {
				display: flex;
				font-size: 20rpx;
				color: #00aaff;
				margin-left: 20rpx;
				align-items: center;
				padding: 4rpx 12rpx;
				border: 1px solid #00aaff;
				border-radius: 50rpx;
			}
		}
		//定位 推荐
		.isDot {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			color: #fff;
			font-size: 24rpx;
			line-height: 32rpx;
			text-align: center;
			background-color: red;
			padding: 6rpx 12rpx;
			border-radius: 10rpx;
		}
	}
	.topClass {
		position: fixed;
		bottom: 120rpx;
		right: 30rpx;
		background-color: rgba(0, 0, 0, 0.5);
		padding: 20rpx;
		width: 44rpx;
		height: 44rpx;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>